<#escape x as x?html> <@h.commonHead title="后台管理系统" keywords="开源,永久免费"
description="springrain开源系统管理后台"/>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<@h.naviHeader /> <@h.leftMenu />
		<!-- 主体内容开始 -->
		<div class="layui-body site-demo">

			<SCRIPT type="text/javascript">
				var selectMenuZtree;
				var menujsondata4select;

				var menuSelectSetting = {
					callback : {
						onClick : clickMenuValue
					},
					data : {
						simpleData : {
							enable : true,
							idKey : "id",
							pIdKey : "pid",
							rootPId : "null"
						}
					}
				};

				function clickMenuValue(event, treeId, treeNode) {
					jQuery("#pname").val(treeNode.name);
					jQuery("#pid").val(treeNode.id);

				};

				var menuTreesetting = {
					callback : {
						onClick : MenuzTreeOnClick
					},
					data : {
						simpleData : {
							enable : true,
							idKey : "id",
							pIdKey : "pid",
							rootPId : "null"
						}
					}
				};

				$(document)
						.ready(
								function() {
									$("[name='iconName']")
											.click(
													function() {
														$("#menuIcon")
																.val(
																		$(this)
																				.text()
																				.replace(
																						/(^\s+)|(\s+$)/g,
																						""));
														layer.closeAll();
													});

									jQuery
											.post(
													"${ctx}/system/menu/list/json",
													function(_json) {
														if (_json.status == "success") {
															menujsondata4select = _json;
															$.fn.zTree
																	.init(
																			$("#menuListTree"),
																			menuTreesetting,
																			_json.data);
															zTree = $.fn.zTree
																	.getZTreeObj("menuListTree");
														} else {
															myalert(_json.message);
														}
													});

								});

				function MenuzTreeOnClick(event, treeId, treeNode) {
					showdata(treeNode);
				};

				function showdata(result) {
					$("#btn_add").hide();
					$("#btn_update").show();
					$("#btn_reload").show();
					$("#btn_delete").show();

					$("#updateForm select ").each(
							function() {
								$(this).find('option:first').attr('selected',
										'selected');
							});
					//console.log(result);
					for ( var s in result) {
						set_val(s, result[s]);
					}

					var _pid = result["pid"];
					if ((!_pid) || _pid == null || _pid == "null" || _pid == "") {
						jQuery("#pid").val("");
					} else {
						jQuery("#pid").val(_pid);
					}

					var _pNode = result.getParentNode();
					if (_pNode) {
						jQuery("#pname").val(_pNode["name"]);
					} else {
						jQuery("#pname").val("");
					}

				}

				function deleteMenu() {
					myconfirm('删除这个菜单，是否继续?', function(index) {
						var id = jQuery("#id").val();
						if (!id || id == "") {
							//myalert("请选择你要删除的记录");
							myalert('请选择你要删除的记录!');
							return false;
						} else {
							//var _url="${ctx}/system/menu/delete?id="+id;
							var _url = "${ctx}/system/menu/delete";
							var listurl = "${ctx}/system/menu/list";
							//mydelete(_url,listurl);
							var data = {
								"id" : id
							};
							ajaxpostonlayer(_url, listurl, data, '删除菜单成功！');
						}
						layer.close(index);
					});
				}

				function dosubmit(i) {

					var msg = "菜单添加成功！";
					if (i == 1) {
						msg = "菜单更新成功！";
					}
					var listurl = '${ctx}/system/menu/list';
					if (i == 0) {
						commonSaveForm("updateForm", listurl, msg);
					} else {
						commonUpdateForm("updateForm", listurl, msg);
					}

				}

				function changeIcon() {
					//页面层-自定义
					layer.open({
						shadeClose : true,
						closeBtn : 1,
						btn : [ '确定' ], //按钮
						type : 1,
						title : "选择图标",
						skin : 'layui-layer-rim', //加上边框
						area : [ '700px', '500px' ], //宽高
						//shadeClose: true,
						content : $("#icon_wrap")
					});

				}

				function showMenuZTree() {
					if (!selectMenuZtree) {
						$.fn.zTree.init($("#menuZtree"), menuSelectSetting,
								menujsondata4select.data);

						selectMenuZtree = $.fn.zTree.getZTreeObj("menuZtree");
						selectMenuZtree.expandAll(true);
						selectZtreeOneNode(jQuery("#pid").val(), "menuZtree");
					}
					//页面层-自定义
					layer.open({
						shadeClose : true,
						closeBtn : 1,
						btn : [ '确定' ], //按钮
						type : 1,
						title : "选择父菜单",
						skin : 'layui-layer-rim', //加上边框
						area : [ '600px', '400px' ], //宽高
						//shadeClose: true,
						content : $("#div_menuZtree")
					});

				}
			</SCRIPT>
			<div class="operate panel panel-default" style="height: 65px;">
				<div class="panel-body">
					<div class="pull-right">
						<@shiro.hasPermission name="/system/menu/update" > <a
							id="btn_reload" style="display: none;"
							href="javascript:location.reload();"
							class="btn  btn-sm  btn-primary"> 跳转至新增 >> </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a id="btn_add" href="javascript:dosubmit(0);"
							class="btn  btn-sm  btn-primary"> <img
							src="${ctx}/images/btn_save.png" style="vertical-align: middle;" />保存新增
						</a> <a id="btn_update" style="display: none;"
							href="javascript:dosubmit(1);" class="btn  btn-sm  btn-primary">
							<img src="${ctx}/images/btn_save.png"
							style="vertical-align: middle;" />保存修改
						</a> </@shiro.hasPermission> <@shiro.hasPermission
						name="/system/menu/delete" > <a id="btn_delete"
							style="display: none;" href="javascript:deleteMenu();"
							class="btn btn-sm btn-danger"> 删除 </a> </@shiro.hasPermission>
					</div>
				</div>
			</div>
			<!-- 功能操作区域结束 -->
			<!-- 列表显示区域  -->
			<div class="row">
				<div class="col-sm-4">
					<div class="widget-box">
						<div class="widget-header">
							<h4 class="widget-title">菜单</h4>
						</div>
						<div class="widget-body">
							<div class="widget-main">
								<ul id="menuListTree" class="ztree"></ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-8">
					<div class="widget-box">
						<div class="widget-header">
							<h4 class="widget-title">菜单信息</h4>
						</div>
						<div class="widget-body">
							<div class="widget-main">
								<form id="updateForm" name="updateForm"
									action="${ctx}/system/menu/update" method="post"
									class="form-horizontal clearfix">
									<input type="hidden" name="id" id="id">
									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="name">名称*：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="name" name="name"
												datatype="*" nullmsg="名称不能为空" />
										</div>
									</div>

									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="url">地址：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="pageurl"
												name="pageurl">
										</div>
									</div>

									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="pid">父节点：</label>
										<div class="col-sm-8">
											<div class="input-group">
												<input name="pname" class="form-control val" id="pname"
													type="text" readonly="readonly" /> <input name="pid"
													id="pid" type="hidden" msg="请选择父节点" check="require" /> <span
													class="input-group-btn"> <a
													href="javascript:showMenuZTree();" data-title="选择父节点"
													class="btn btn-sm btn-primary"> <i class="fa fa-search"></i>
												</a>
												</span>
											</div>
										</div>
									</div>

									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="type">资源类型：</label>
										<div class="col-sm-8">
											<select name="type" id="type" class="form-control">
												<option value="0">按钮资源</option>
												<option value="1">导航菜单</option>
											</select>
										</div>
									</div>


									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="menuIcon">图标：</label>
										<div class="col-sm-8">
											<input name="menuIcon" class="form-control" id="menuIcon"
												onclick="changeIcon()" type="text" readonly="readonly" />
										</div>
									</div>
									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="sortno">排序：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="sortno"
												name="sortno">
										</div>
									</div>

									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="state">是否可用*：</label>
										<div class="col-sm-8">
											<select name="state" id="state" class="form-control">
												<option value="是">是</option>
												<option value="否">否</option>
											</select>
										</div>
									</div>

									<div class="form-group col-xs-9">
										<label class="col-sm-4 control-label" for="description">备注：</label>
										<div class="col-sm-8">
											<textarea class="form-control" name="description"
												id="description" rows="5" class="col-xs-12"></textarea>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div></div>
					</div>

				</div>
			</div>

			<div id="div_menuZtree">
				<ul id="menuZtree" class="ztree"></ul>
			</div>

			<div style="display: none;" id="icon_wrap">
				<div class="col-xs-6 col-sm-3">
					<ul class="list-unstyled">
						<li name="iconName"><i class="ace-icon fa fa-adjust"></i>
							fa-adjust</li>

						<li name="iconName"><i class="ace-icon fa fa-asterisk"></i>
							fa-asterisk</li>

						<li name="iconName"><i class="ace-icon fa fa-ban"></i> fa-ban
						</li>

						<li name="iconName"><i class="ace-icon fa fa-bar-chart-o"></i>
							fa-bar-chart-o</li>

						<li name="iconName"><i class="ace-icon fa fa-barcode"></i>
							fa-barcode</li>

						<li name="iconName"><i class="ace-icon fa fa-flask"></i>
							fa-flask</li>

						<li name="iconName"><i class="ace-icon fa fa-beer"></i>
							fa-beer</li>

						<li name="iconName"><i class="ace-icon fa fa-bell-o"></i>
							fa-bell-o</li>

						<li name="iconName"><i class="ace-icon fa fa-bell"></i>
							fa-bell</li>

						<li name="iconName"><i class="ace-icon fa fa-bolt"></i>
							fa-bolt</li>

						<li name="iconName"><i class="ace-icon fa fa-book"></i>
							fa-book</li>

						<li name="iconName"><i class="ace-icon fa fa-bookmark"></i>
							fa-bookmark</li>

						<li name="iconName"><i class="ace-icon fa fa-bookmark-o"></i>
							fa-bookmark-o</li>

						<li name="iconName"><i class="ace-icon fa fa-briefcase"></i>
							fa-briefcase</li>

						<li name="iconName"><i class="ace-icon fa fa-bullhorn"></i>
							fa-bullhorn</li>

						<li name="iconName"><i class="ace-icon fa fa-calendar"></i>
							fa-calendar</li>

						<li name="iconName"><i class="ace-icon fa fa-camera"></i>
							fa-camera</li>

						<li name="iconName"><i class="ace-icon fa fa-camera-retro"></i>
							fa-camera-retro</li>

						<li name="iconName"><i class="ace-icon fa fa-certificate"></i>
							fa-certificate</li>
					</ul>
				</div>

				<div class="col-xs-6 col-sm-3">
					<ul class="list-unstyled">
						<li name="iconName"><i class="ace-icon fa fa-check-square-o"></i>
							fa-check-square-o</li>

						<li name="iconName"><i class="ace-icon fa fa-square-o"></i>
							fa-square-o</li>

						<li name="iconName"><i class="ace-icon fa fa-circle"></i>
							fa-circle</li>

						<li name="iconName"><i class="ace-icon fa fa-circle-o"></i>
							fa-circle-o</li>

						<li name="iconName"><i class="ace-icon fa fa-cloud"></i>
							fa-cloud</li>

						<li name="iconName"><i class="ace-icon fa fa-cloud-download"></i>
							fa-cloud-download</li>

						<li name="iconName"><i class="ace-icon fa fa-cloud-upload"></i>
							fa-cloud-upload</li>

						<li name="iconName"><i class="ace-icon fa fa-coffee"></i>
							fa-coffee</li>

						<li name="iconName"><i class="ace-icon fa fa-cog"></i> fa-cog
						</li>

						<li name="iconName"><i class="ace-icon fa fa-cogs"></i>
							fa-cogs</li>

						<li name="iconName"><i class="ace-icon fa fa-comment"></i>
							fa-comment</li>

						<li name="iconName"><i class="ace-icon fa fa-comment-o"></i>
							fa-comment-o</li>

						<li name="iconName"><i class="ace-icon fa fa-comments"></i>
							fa-comments</li>

						<li name="iconName"><i class="ace-icon fa fa-comments-o"></i>
							fa-comments-o</li>

						<li name="iconName"><i class="ace-icon fa fa-credit-card"></i>
							fa-credit-card</li>

						<li name="iconName"><i class="ace-icon fa fa-tachometer"></i>
							fa-tachometer</li>

						<li name="iconName"><i class="ace-icon fa fa-desktop"></i>
							fa-desktop</li>

						<li name="iconName"><i
							class="ace-icon fa fa-arrow-circle-o-down"></i>
							fa-arrow-circle-o-down</li>

						<li name="iconName"><i class="ace-icon fa fa-download"></i>
							fa-download</li>
					</ul>
				</div>

				<div class="col-xs-6 col-sm-3">
					<ul class="list-unstyled">
						<li name="iconName"><i class="ace-icon fa fa-pencil-square-o"></i>
							fa-pencil-square-o</li>

						<li name="iconName"><i class="ace-icon fa fa-envelope"></i>
							fa-envelope</li>

						<li name="iconName"><i class="ace-icon fa fa-envelope-o"></i>
							fa-envelope-o</li>

						<li name="iconName"><i class="ace-icon fa fa-exchange"></i>
							fa-exchange</li>

						<li name="iconName"><i
							class="ace-icon fa fa-exclamation-circle"></i>
							fa-exclamation-circle</li>

						<li name="iconName"><i class="ace-icon fa fa-external-link"></i>
							fa-external-link</li>

						<li name="iconName"><i class="ace-icon fa fa-eye-slash"></i>
							fa-eye-slash</li>

						<li name="iconName"><i class="ace-icon fa fa-eye"></i> fa-eye
						</li>

						<li name="iconName"><i class="ace-icon fa fa-video-camera"></i>
							fa-video-camera</li>

						<li name="iconName"><i class="ace-icon fa fa-fighter-jet"></i>
							fa-fighter-jet</li>

						<li name="iconName"><i class="ace-icon fa fa-film"></i>
							fa-film</li>

						<li name="iconName"><i class="ace-icon fa fa-filter"></i>
							fa-filter</li>

						<li name="iconName"><i class="ace-icon fa fa-fire"></i>
							fa-fire</li>

						<li name="iconName"><i class="ace-icon fa fa-flag"></i>
							fa-flag</li>

						<li name="iconName"><i class="ace-icon fa fa-folder"></i>
							fa-folder</li>

						<li name="iconName"><i class="ace-icon fa fa-folder-open"></i>
							fa-folder-open</li>

						<li name="iconName"><i class="ace-icon fa fa-folder-o"></i>
							fa-folder-o</li>

						<li name="iconName"><i class="ace-icon fa fa-folder-open-o"></i>
							fa-folder-open-o</li>

						<li name="iconName"><i class="ace-icon fa fa-cutlery"></i>
							fa-cutlery</li>
					</ul>
				</div>

				<div class="col-xs-6 col-sm-3">
					<ul class="list-unstyled">
						<li name="iconName"><i class="ace-icon fa fa-gift"></i>
							fa-gift</li>

						<li name="iconName"><i class="ace-icon fa fa-glass"></i>
							fa-glass</li>

						<li name="iconName"><i class="ace-icon fa fa-globe"></i>
							fa-globe</li>

						<li name="iconName"><i class="ace-icon fa fa-users"></i>
							fa-users</li>

						<li name="iconName"><i class="ace-icon fa fa-hdd-o"></i>
							fa-hdd-o</li>

						<li name="iconName"><i class="ace-icon fa fa-headphones"></i>
							fa-headphones</li>

						<li name="iconName"><i class="ace-icon fa fa-heart"></i>
							fa-heart</li>

						<li name="iconName"><i class="ace-icon fa fa-heart-o"></i>
							fa-heart-o</li>

						<li name="iconName"><i class="ace-icon fa fa-home"></i>
							fa-home</li>

						<li name="iconName"><i class="ace-icon fa fa-inbox"></i>
							fa-inbox</li>

						<li name="iconName"><i class="ace-icon fa fa-info-circle"></i>
							fa-info-circle</li>

						<li name="iconName"><i class="ace-icon fa fa-key"></i> fa-key
						</li>

						<li name="iconName"><i class="ace-icon fa fa-leaf"></i>
							fa-leaf</li>

						<li name="iconName"><i class="ace-icon fa fa-laptop"></i>
							fa-laptop</li>

						<li name="iconName"><i class="ace-icon fa fa-gavel"></i>
							fa-gavel</li>

						<li name="iconName"><i class="ace-icon fa fa-lemon-o"></i>
							fa-lemon-o</li>

						<li name="iconName"><i class="ace-icon fa fa-lightbulb-o"></i>
							fa-lightbulb-o</li>

						<li name="iconName"><i class="ace-icon fa fa-lock"></i>
							fa-lock</li>

						<li name="iconName"><i class="ace-icon fa fa-unlock"></i>
							fa-unlock</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 主体内容结束 -->
		<@h.footer />
	</div>
</body>
</html>
</#escape>
